import React, { Component } from "react";

// 导入轮播图组件
import { Carousel, Flex, Grid, WingBlank } from "antd-mobile";

// 导入axios
import {API} from "../../utils/api";
// 导入当前定位城市信息
import {getCurrentCity} from '../../utils/index'
// 导入菜单栏图片
import img1 from "../../assets/images/nav-1.png";
import img2 from "../../assets/images/nav-2.png";
import img3 from "../../assets/images/nav-3.png";
import img4 from "../../assets/images/nav-4.png";
// 导入URL地址
import {BASE_URL} from '../../utils/url'
// 引入样式
import "./index.css";
// 导入顶部搜索栏
import SearchHeader from '../../components/searchHeader'
// 导航栏菜单
const navs = [
  {
    id: 1,
    img: img1,
    title: "整租",
    path: "/home/list"
  },
  {
    id: 2,
    img: img2,
    title: "合租",
    path: "/home/list"
  },
  {
    id: 3,
    img: img3,
    title: "地图找房",
    path: "/map"
  },
  {
    id: 4,
    img: img4,
    title: "去找房",
    path: "/rent/add"
  }
];
// // 获取地理位置信息
// navigator.geolocation.getCurrentPosition(position => {
//   console.log('地理',position);
// })
export default class Index extends Component {
  state = {
    // 轮播图状态数据
    swipers: [],
    // 解决轮播图bug
    isSwipersLoaded: false,
    // 租房小组
    groups: [],
    // 新闻资讯
    news: [],
    cityName: '北京'
  };
  // 获取轮播图数据方法
  async getSwipers() {
    const { data: res } = await API.get(`/home/swiper`);
    this.setState(() => {
      return {
        swipers: res.body,
        isSwipersLoaded: true
      };
    });
  }
  // 获取租房小组数据方法
  async getGroups() {
    const { data: res } = await API.get(`/home/groups`, {
      params: {
        area: "AREA%7C88cff55c-aaa4-e2e0"
      }
    });
    this.setState(() => {
      return {
        groups: res.body
      };
    });
  }
  // 获取新闻资讯数据
  async getNews() {
    const { data: res } = await API.get(`/home/news`, {
      params: {
        area: "AREA%7C88cff55c-aaa4-e2e0"
      }
    });
    this.setState(() => {
      return {
        news: res.body
      };
    });
  }
  async componentDidMount() {
    // 获取轮播图数据
    this.getSwipers();
    // 获取租房小组的数据
    this.getGroups();
    // 获取新闻资讯数据
    this.getNews();
    const curCity = await getCurrentCity()
      this.setState(() => {
        return {
          cityName: curCity.label
        }
      })
  }
  // 渲染轮播图效果
  renderSwipers() {
    return this.state.swipers.map(val => (
      <a
        key={val.id}
        href="http://itcast.cn"
        style={{
          display: "inline-block",
          width: "100%",
          height: 212
        }}
      >
        <img
          src={ BASE_URL + val.imgSrc}
          alt=""
          style={{ width: "100%", verticalAlign: "top" }}
        />
      </a>
    ));
  }
  // 渲染租房小组模块
  renderNavs() {
    return navs.map(item => (
      <Flex.Item
        key={item.id}
        onClick={() => this.props.history.push(item.path)}
      >
        <img src={item.img} alt=""></img>
        <h2>{item.title}</h2>
      </Flex.Item>
    ));
  }
  // 渲染最新资讯模块
  renderNews() {
    return this.state.news.map(item => (
      <div className="news-item" key={item.id}>
        <div className="imgWrap">
          <img
            src={BASE_URL + item.imgSrc}
            alt=""
            className="img-news"
          />
        </div>
        <Flex className="content" direction="column" justify="between">
          <h3 className="news-title2">{item.title}</h3>
          <Flex className="info" justify="between">
            <span>{item.from}</span>
            <span>{item.date}</span>
          </Flex>
        </Flex>
      </div>
    ));
  }
  render() {
    return (
      <div className="index">
        {/* 轮播图 */}
        <div className="swiper">
          {this.state.isSwipersLoaded ? (
            <Carousel autoplay infinite autoplayInterval={5000}>
              {this.renderSwipers()}
            </Carousel>
          ) : (
            ""
          )}
          {/* 搜索模块 */}
          <SearchHeader cityName={this.state.cityName}/>
        </div>
        {/* 菜单栏 */}
        <Flex className="nav">{this.renderNavs()}</Flex>
        {/* 租房小组 */}
        <div className="groups">
          <h3 className="title">
            租房小组
            <span className="more">更多</span>
          </h3>
          <Grid
            data={this.state.groups}
            columnNum={2}
            square={false}
            hasLine={false}
            renderItem={item => (
              <Flex className="group-item" justify="around" key={item.id}>
                <div className="desc">
                  <p className="title-item">{item.title}</p>
                  <span className="info">{item.desc}</span>
                </div>
                <img
                  src={BASE_URL + item.imgSrc}
                  alt=""
                  className="img-group"
                />
              </Flex>
            )}
          />
        </div>
        {/* 最新资讯 */}
        <div className="news">
          <h3 className="news-title">最新资讯</h3>
          <WingBlank size="md">{this.renderNews()}</WingBlank>
        </div>
      </div>
    );
  }
}
